<div class="layui-container fly-marginTop fly-user-main">
  {include file="common/menu" /}
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  <div class="fly-panel fly-panel-user" pad20>
      <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title" id="LAY_mine">
          <li class="layui-this" lay-id="info">我的资料</li>
          <li lay-id="pass">密码</li>
          <li lay-id="avatar">头像</li>
          <li lay-id="cover">封面</li>
          
        </ul>
        <div class="layui-tab-content" style="padding: 20px 0;">
          <!-- 我的资料 -->
          <div class="layui-form layui-form-pane layui-tab-item layui-show">
            <form method="post">

              <!-- 隐藏域 -->
              <input type="hidden" name="action" value="profile" />

              <!--邮箱 -->
              <div class="layui-form-item">
                <label for="L_email" class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                  <input type="text" id="L_email" name="email" required lay-verify="email" autocomplete="off" value="{$LoginUser['email']}" class="layui-input" disabled>
                </div>
                {if condition="$LoginUser['auth'] == 0"}
                  <div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需<a id="auth" href="javascript:void(0)" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。</div>
                {/if}
              </div>

              <!--昵称 -->
              <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                  <input type="text" id="L_username" name="nickname" required lay-verify="required" autocomplete="off" value="{$LoginUser['nickname']}" class="layui-input">
                </div>
                <!--性别 -->
                <div class="layui-inline">
                  <div class="layui-input-inline" style="width: 300px;">
                    <input type="radio" name="sex" value="0" {$LoginUser['sex'] == '0' ? 'checked' : ''} title="保密">
                    <input type="radio" name="sex" value="1" {$LoginUser['sex'] == '1' ? 'checked' : ''} title="男">
                    <input type="radio" name="sex" value="2" {$LoginUser['sex'] == '2' ? 'checked' : ''} title="女">
                  </div>
                </div>
              </div>

              <!-- 城市 -->
              <div class="layui-form-item">
                <label for="L_city" class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                  <select name="province" id="province" lay-filter="province" lay-verify="required">
                      <option value="">请选择省</option>
                      {foreach $province as $item} 
                        <option {$LoginUser.province == $item.code ? "selected":""} value="{$item.code}">{$item.name}</option>
                      {/foreach}
                    </select>
                </div>
                <div class="layui-input-inline">
                  <select name="city" id="city" lay-filter="city" lay-verify="required">
                      <option value="">请选择市</option>
                      {foreach $city as $item} 
                        <option {$LoginUser.city == $item.code ? "selected":""} value="{$item.code}">{$item.name}</option>
                      {/foreach}
                  </select>
                </div>
                <div class="layui-input-inline">
                  <select name="district" id="district" lay-filter="district" lay-verify="required">
                      <option value="">请选择区</option>
                      {foreach $district as $item} 
                        <option {$LoginUser.district == $item.code ? "selected":""} value="{$item.code}">{$item.name}</option>
                      {/foreach}
                  </select>
                </div>
              </div>

              <!-- 个人简介 -->
              <div class="layui-form-item layui-form-text">
                <label for="L_sign" class="layui-form-label">个人简介</label>
                <div class="layui-input-block">
                  <textarea placeholder="随便写些什么刷下存在感" id="L_sign"  name="content" autocomplete="off" class="layui-textarea" style="height: 80px;">{$LoginUser['content']}</textarea>
                </div>
              </div>

              <div class="layui-form-item">
                <button class="layui-btn" key="set-mine" type="submit">确认修改</button>
              </div>
            </form>
          </div>
            
          <!-- 密码 -->
          <div class="layui-form layui-form-pane layui-tab-item">
            <form method="post">
              <!-- 隐藏域 -->
              <input type="hidden" name="action" value="password" />
              <div class="layui-form-item">
                <label for="L_nowpass" class="layui-form-label">当前密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_pass" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
              </div>
              <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_repass" name="repass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn" key="set-mine" type="submit">确认修改</button>
              </div>
            </form>
          </div>

          <!-- 头像 -->
          <div class="layui-form layui-form-pane layui-tab-item">
            <form method="post" enctype="multipart/form-data">
              <!-- 隐藏域 -->
              <input type="hidden" name="action" value="avatar" />
              <div class="layui-form-item">
                <div class="avatar-add">
                  <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>

                  <button type="button" class="layui-btn upload-img" onclick="avatar.click()">
                    <i class="layui-icon">&#xe67c;</i>上传头像
                  </button>

                  <input type="file" name="avatar" id="avatar" hidden />

                  <img src="{$Think.cookie.LoginUser['avatar']}" id="img">

                  <span class="loading"></span>
                </div>
              </div>
              <div class="layui-form-item" style="margin-left: 15%;">
                <button class="layui-btn" key="set-mine" type="submit">确认上传</button>
              </div>
            </form>
          </div>
            
          <!-- 封面 -->
          <div class="layui-form layui-form-pane layui-tab-item">
            <form method="post" enctype="multipart/form-data">
              <!-- 隐藏域 -->
              <input type="hidden" name="action" value="cover" />
              <div class="layui-form-item">
                <div class="avatar-add">
                  <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>

                  <button type="button" class="layui-btn upload-img" onclick="cover.click();">
                    <i class="layui-icon">&#xe67c;</i>上传封面
                  </button>

                  <input type="file" name="cover" id="cover" hidden />

                  <img src="{$Think.cookie.LoginUser['cover']}" id="imgcover">

                  <span class="loading"></span>
                </div>
              </div>
              <div class="layui-form-item" style="margin-left: 15%;">
                <button class="layui-btn" key="set-mine" type="submit">确认上传</button>
              </div>
            </form>
          </div>
          </div>
        </div>
  </div>
</div>
<script src="/assets/home/layui/layui.js"></script>
<script>
// 预览图片
function getObjectURL(file) {
  var url = null ; 
  if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
  } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
  } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
  }
  return url ;
}

  layui.use(['layer', 'jquery', 'form'], function(){
    var layer = layui.layer
    var form = layui.form
    var $ = layui.jquery

    //给省份绑定事件
    form.on('select(province)', function(data){
        var province = data.value
         //异步请求
         $.ajax({
             type: 'POST',
             url:`{:url('home/user/area')}`,
             data: `code=${province}`,
             dataType: 'json',
             success: function(data){
                 console.log(data)
                 var output = '<option value="">请选择市</option>'
                  for(var city of data)
                  {
                      output += `<option value="${city.code}">${city.name}</option>`
                  }
                  $("#city").html(output)
                  $("#district").html(`<option value="">请选择县/区</option>`)
                  //用layui的方式渲染一下select下拉框
                  form.render('select')
             }
         })
    })

    //给市绑定事件
    form.on('select(city)', function(data){
      var city = data.value
          $.ajax({
             type: 'POST',
        //异步请求
           url:`{:url('home/user/area')}`,
             data: `code=${city}`,
             dataType: 'json',
             success: function(data){
                 console.log(data)
                 var output = '<option value="">请选择区</option>'
                  for(var city of data)
                  {
                      output += `<option value="${city.code}">${city.name}</option>`
                  }
                  $("#district").html(output)
                  //用layui的方式渲染一下select下拉框
                  form.render('select')
             }
         })
    })

    // 邮箱校验
    $("#auth").click(function(){
      var email = $("#L_email").val()
      if(confirm('是否发送邮箱验证'))
      {
        $.ajax({
          type: 'POST',
          url:`{:url('home/user/email')}`,
          data:`email=${email}`,
          success:function(data){
            // 消息提示
            layer.msg(data.msg);
          }
        })
      }
    })

    // 头像预览图
    $('#avatar').change(function(){
      var url=getObjectURL(this.files[0]);
      if(url){
        $('#img').attr('src',url);
      }
    });

    // 封面预览图
    $('#cover').change(function(){
      var url=getObjectURL(this.files[0]);
      if(url){
        $('#imgcover').attr('src',url);
      }
    });
  })
</script>